<template>
  <div>
    <mavon-editor 
      v-model="context" 
      ref="md" 
      :style="'height:' + height" 
      :toolbars="toolbars"
      @change="handleChange"
      @imgAdd="imgAdd" />
  </div>
</template>
<script>
import { uploadFilesToOss } from '@/utils/upload'
export default {
  name: "Add",
  props: {
    articleData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      context: '',//输入的数据
      returnData:{
        content: "",
        contentHtml: ""
      },
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/uploadFilesToOss", // 上传的图片服务器地址
      height: document.documentElement.clientHeight - 200 + 'px',
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      }
    }
  },
  created() {
    this.initData()
  },
  /**组件挂在完毕 */
  mounted() {
    const that = this
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight - 200 + 'px'
    }
  },
  methods: {
    /**初始化数据 */
    initData() {
      this.context = this.articleData.content
    },
    /**编辑区域内容改变 */
    handleChange(value, render) {
      this.returnData.content = value
      this.returnData.contentHtml = render
    },
    /**插入图片 */
    imgAdd(pos, $file) {
      uploadFilesToOss(this.uploadUrl, $file).then(res => {
        const data = res.data
        const url = data.urls
        this.$refs.md.$img2Url(pos, url)
      })
    },
    /**获取文本内容 */
    getContext(){
      this.$emit('setdata', this.returnData);
    }
  }
    
};
</script>
<style scoped>
  .v-note-wrapper.shadow {
    z-index: 5;
  }
</style>
